<template>
  <!-- 预警决策主页-智能联动模块 -->
  <div class="smart warningtablestyle">
    <div class="marquee_box">
      <marquee
      v-if="linkageList && linkageList.length"
        @mouseenter="marqueeEnter"
        @mouseleave="marqueeLeave"
        scrollamount="2"
        direction="up"
        style="width:100%;height:100%;"
      >
        <ul class="marquee_list" :class="{marquee_top:animate}" v-if="!nodata">
          <li
            :class="index%2==0?'lione':'litwo'"
            class="startbox"
            v-for="(item, index) in linkageList"
            :key="index"
            @dblclick="goSmartPage(item)"
          >
            <div class="datetime">
              <div class="startbox">{{item.linkageTime.slice(0,10)}}</div>
              <div class="startbox">{{item.linkageTime.slice(10,20)}}</div>
            </div>
            <div class="content">
              <div>{{ item.stationName }}</div>
              <div>{{item.linkageReason}}</div>
            </div>
          </li>
        </ul>
      </marquee>
      <div class="no-dataimg" v-if="nodata">
        <Nodata />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import Nodata from "@/components/Nodata/index.vue";
import { log } from "three";
interface tableDataList {
  index: number;
  alarmTime: string;
  alarmPowerStation: string;
  alarmEquipment: string;
  alarmTemp: string;
}
interface objType {
  row: object;
  rowIndex: number;
}
@Component({
  components: {
    Nodata,
  },
})
export default class WarningSmart extends Vue {
  @Prop({ default: () => [] })
  linkageList: any;
  private animate: boolean = false;
  private smartScrollTimer; // 滚动定时器
  nodata: boolean = false;
  tableData: Array<tableDataList> = [
    {
      index: 1,
      alarmTime: "110kV商西变电站",
      alarmPowerStation: "主变",
      alarmEquipment: "变压器",
      alarmTemp: "80°",
    },
    {
      index: 2,
      alarmTime: "110kV商西变电站",
      alarmPowerStation: "主变",
      alarmEquipment: "变压器",
      alarmTemp: "80°",
    },
    {
      index: 3,
      alarmTime: "110kV商西变电站",
      alarmPowerStation: "主变",
      alarmEquipment: "变压器",
      alarmTemp: "80°",
    },
    {
      index: 4,
      alarmTime: "110kV商西变电站",
      alarmPowerStation: "主变",
      alarmEquipment: "变压器",
      alarmTemp: "80°",
    },
  ];
  tableSelect: Array<object> = [];

  // 跳转到二级智能联动页面
  private goSmartPage(smartData: any) {
    this.$router.push({
      name: "linkage",
      params: { smartData: smartData },
    });
  }
  marqueeEnter(event) {
    event.target.stop();
  }
  marqueeLeave(event) {
    event.target.start();
  }
  // 表格选择事件
  handleSelectionChange(val: any): void {
    this.tableSelect = val;
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }

  // 监听智能联动滚动列表
  @Watch("linkageList", { deep: true })
  public linkageListchange(to: any, from: any) {
    if (this.linkageList && this.linkageList.length > 0) {
      (this as any).nodata = false;
      this.linkageList.map((item) => {
        item.linkageTime =
          item.linkageTime.slice(0, 10) + " " + item.linkageTime.slice(11, 19);
      });
    } else {
      (this as any).nodata = true;
    }
  }
}
</script>

<style lang="scss" scoped>
.smart {
  width: 100%;
  height: 100%;
  padding:0.1rem 0.2rem;
  padding-top:0.4rem;
  .marquee_box {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .marquee_list {
    width: 100%;
    display: block;
     li {
      cursor: pointer;
      height: 0.5rem;
      width: 100%;
      margin-bottom: 0.06rem;
      border-radius: 0.04rem;
      padding:0.06rem 0.16rem;
      background: rgba(15, 81, 81, 0.2);
      div {
        font-size: 0.14rem;
      }
      .datetime {
        width: 1rem;
        height: 100%;

        > div {
          height: 50%;
        }
      }
      .content {
        width: calc(100% - 1rem);
        height: 100%;
        > div {
          height: 50%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .litwo {
      background: rgb(32, 62, 135, 0.65);
    }
  }
  .no-dataimg {
    margin-top: 1rem;
  } 
}
</style>

